<script lang="ts" setup>
import { onMounted } from 'vue'
import { RefreshRight } from '@element-plus/icons-vue'

onMounted(() => {
  //
})
const refreshClass = ref([])
const refreshHandle = () => {
  refreshClass.value.push('refresh')
  setTimeout(() => {
    refreshClass.value = []
  }, 500)
}

</script>

<template>
  <el-icon class="cursor-pointer" @click="refreshHandle">
    <RefreshRight :class="refreshClass" />
  </el-icon>
</template>

<style scoped>
.refresh {
  animation: rotate .5s ease-in-out;
}
@keyframes rotate {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}
</style>
